<!--
 * @Author: wwssaabb
 * @Date: 2021-09-08 09:04:17
 * @LastEditTime: 2021-09-10 11:08:19
 * @FilePath: \gshop-client\src\components\Navbar.vue
-->
<template>
  <NavBar
    :style="{
      background: props.bgImg
        ? `linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(${props.bgImg}) no-repeat 0% 0%/ cover`
        : props.bgc
        ? props.bgc
        : base.bgc,
    }"
    :title="props.title"
    :leftText="props.leftText"
    :leftArrow="props.leftArrow"
    :rightText="props.rightText"
  >
    <template #left>
      <slot name="left"
        ><Icon
          v-if="props.leftArrow"
          name="arrow-left"
          size="20"
          :color="props.colorLeft ? props.colorLeft : base.colorLeft"
          @click="back"
        ></Icon
      ></slot>
    </template>
    <template #title>
      <slot name="title">
        <span class="title">{{ title }}</span>
      </slot>
    </template>

    <template #right>
      <slot name="right"></slot>
    </template>
  </NavBar>
</template>

<script setup lang="ts">
import { useSlots, computed } from "vue";
import { NavBar, Icon } from "vant";
import { useRouter } from "vue-router";
const router = useRouter();
const base = {
  bgc: "#02a774",
  colorLeft: "#fff",
};
const props = defineProps({
  title: String,
  leftText: String,
  colorLeft: String,
  leftArrow: {
    type: Boolean,
    default: false,
  },
  rightText: String,
  clickLeft: {
    type: Object,
    default: function back(): void {
      console.log("左边被点击");
    },
  },
  clickRight: Object,
  bgc: String,
  bgImg: String,
  color: String,
});
//默认返回功能
const back = (): void => {
  router.back();
};
</script>

<style lang="scss" scoped>
.slot-content {
  width: 100vw;
  height: 45px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;

  div.left {
    display: inline-block;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  div.title {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.title {
  color: #fff;
  font-size: 16px;
}
</style>
